<template>
    <!--文章详情的评论啊。-->
      <div class="show_comment">
        <div class="before_next">
           <div class="before">
             <span>上一篇：</span><span><a  href="javascript:;" @click="$router.push('/detail/'+$store.state.previous.id)">{{$store.state.previous.title}}</a></span>
           </div>
          <div class="next">
            <span>下一篇：</span><span><a  href="javascript:;" @click="$router.push('/detail/'+$store.state.next.id)">{{$store.state.next.title}}</a></span>
          </div>
        </div>

        <!--评论-->
        <el-dialog :title="child_comment_title" :visible.sync="childRely" @open="readName" @close="writeToStorage">
          <!--<el-form :model="form">-->
          <el-form :inline="true" >
            <el-form-item label="昵称">
              <el-input v-model="$store.state.name" placeholder="输入合法的昵称"></el-input>
            </el-form-item>
            <el-form-item label="邮箱">
              <el-input v-model="$store.state.email" placeholder="请留下有营养的评论吧!"></el-input>
            </el-form-item>
          </el-form>

          <el-form >

            <section>
              <!--:value="myText"-->
              <vue-emoji ref="emoji_comment" width="100%" @input="onInput"  :value="myText"/>
            </section>
          </el-form>
          <div  class="login_quick">
            <el-button type="success" icon="iconfont icon-xingzhuang" circle></el-button>
            <el-button type="success" icon="iconfont icon-qq3" circle></el-button>
          </div>
          <div slot="footer" class="dialog-footer">
            <el-button @click="childRely = false">取 消</el-button>
            <el-button type="primary" @click="submitChildReply()">确 定</el-button>
          </div>
        </el-dialog>

        <div >
          <el-card class="box-card">
            <div slot="header" class="clearfix">
             <span v-if="$store.state.articleCommentList.length!=0">
               <span class="iconfont icon-pinglun6" >&nbsp;&nbsp;&nbsp;</span>
               <span>{{$store.state.articleCommentList.length}}条回应</span>
             </span>
             <span v-if="$store.state.articleCommentList.length==0"> <span class="iconfont icon-face-fang-jiong" v-if="true">&nbsp;&nbsp;</span><span>请坐沙发吧!!!</span> </span>

            </div>
            <div class="text item">
               <ul class="comment_list" v-if="$store.state.articleCommentList.length!=0">
                 <li  :id="'comment_'+item.id" class="comment_item" v-for="(item,index) in $store.state.articleCommentList" :key="index">
                   <div class="zhanwei">
                   <div class="comment_name">
                      <div class="comment_img">
                        <el-avatar class="img"  :src="item.avatarImg"></el-avatar>
                      </div>
                      <div class="comment_content">
                          <div class="comment_nickname" >
                            <span>{{item.nickName}}</span><span class="time">{{item.createTime}}</span>
                            <span class="reply"> <el-link :underline="no_underline" type="primary" @click="replyAnswer(item.id,item.nickName,index)" >回复</el-link></span>

                          </div>
                          <div class="comment_word">{{item.content}}</div>
                      </div>
                   </div>
                   </div>
                   <ul class="children_list" v-if="item.childrenMsg !=null && item.childrenMsg.length>0 ">
                     <li v-for="(it,index) in item.childrenMsg" :key="index">
                       <div class="zhanwei">
                         <div class="comment_name">
                           <div class="comment_img">
                             <el-avatar class="img"  :src="it.avatarImg"></el-avatar>
                           </div>
                           <div class="comment_content">
                             <div class="comment_nickname" ><span>{{it.nickName}}</span><span class="time">{{it.createTime}}</span></div>
                             <div class="comment_word">{{it.content}}</div>
                           </div>
                         </div>
                       </div>
                     </li>
                   </ul>
                 </li>






               </ul>
            </div>
          </el-card>
        </div>

      </div>
</template>

<script>
  import VueEmoji from '../common/VueEmoji'
  import commonUtils from '../common/commonUtils'
  export default {
    name: 'articleComment',
    components: {
      'vue-emoji': VueEmoji
    },
    data(){
      return {
        myText: '',
        myTextValue: '',
        parent_id: '',  //子回复的id
        childRely:false,
        no_underline:false,
        child_comment_title:"评论回复:",
        arrayIndex: ''
      }
    },
    computed:{
        commonList(){
            return this.$store.state.articleCommentList;
        }
    },
    // watch:{
    //   commonList(newValue,oldValue){
    //
    //   }
    // },
    methods:{

      clearTextarea () {        //这两个方法和emjo 插件有关。
        this.$refs.emoji_comment.clear()
      },
      onInput (event) {
        console.log(event)
        console.log(event.data)
        this.myTextValue = event.data
      },
      //提交子评论
      replyAnswer(id,value,index){
          this.childRely=true;
        this.child_comment_title = '@' + value + ':',
          this.parent_id=id;
        this.arrayIndex = index

      },
      //将相关的信息写入到本地中。
      readName(){
        //从本地读取数据。
        var item = localStorage.getItem('session_obj')
        console.log("本地读取数据")
        if (item) {
          var parse = JSON.parse(item)
          if(parse){
            this.$store.state.name=parse.name;
            this.$store.state.email=parse.email;
            this.$store.state.avatar=parse.avatar;
          }
        }
      },
      writeToStorage(){
        console.log("本地写入数据")
        if (this.$store.state.name && this.$store.state.email) {
          var obj={
            name:this.$store.state.name,
            email:this.$store.state.email,
            avatar:this.$store.state.avatar
          }
          localStorage.setItem("session_obj",JSON.stringify(obj))
        }
        this.clearTextarea()
        this.myTextValue = ''
      },
      submitChildReply(){
        if (!this.$store.state.name) {
          commonUtils.AlertOperationSuccess('请先留下名讳!', 1000)
          return;
        }
        if (!this.$store.state.email) {
          commonUtils.AlertOperationSuccess('请输入邮箱!', 1000)
          return;
        }
        if (!this.myTextValue) {
          commonUtils.AlertOperationSuccess('来了就说点什么吧!', 1000)
          return;
        }
        if (!this.parent_id) {
          commonUtils.AlertOperationSuccess('我不知道你要对谁回复!!!', 1000)
          return;
        }
        var model ={
          nickName:this.$store.state.name,
          email:this.$store.state.email,
          avatar:this.$store.state.avatar,
          article:this.$route.params.id,
          content:this.myTextValue,
          parent: this.parent_id,
          arrayIndex:this.arrayIndex
        }
        console.log(model)
        this.$store.dispatch('submitChildReply', model)
        this.clearTextarea()
        this.childRely=false;
        this.myTextValue = ''
        this.parent_id = ''
        this.child_comment_title="评论回复:"
        this.arrayIndex = ''

      }
    },
  }
</script>

<style scoped>
  .show_comment{
       margin-top:2px;
      width: 100%;
    /*min-height: 700px;*/
     /*background-color: red;*/
  }
  .before_next{
     /*background-color: indianred;*/
  }
  .before_next .before{
    width: 99%;
      height: 30px;
    line-height: 30px;
    font-size: 18px;
    margin-left: 1%;
    /*background-color: yellow;*/
  }

  .before_next .next{
    width: 99%;
    height: 30px;
    line-height: 30px;
    font-size: 18px;
    margin-left: 1%;
    /*background-color: deepskyblue;*/
  }

  .before_next .next a{
     text-decoration: none;
    color: #8492a6;
  }

  .before_next .before a{
      text-decoration: none;
    color: #8492a6;
  }

  .before_next .next a:hover{
    text-decoration: underline;
    color: #0000EE;
  }
  .before_next .before a:hover{
     text-decoration: underline;
      color: #0000EE;
  }

  /*----------评论---------------*/
  .text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }

  .comment_list{
      width: 100%;
  }

  .comment_list  .comment_item{
     list-style: none;
  }

  .comment_item{
       margin-top: 15px;
      width: 100%;
    min-height: 20px;
      background-color: #d2dbe3;
    border-radius: 10px;
  }

  .zhanwei{
     width: 100%;
     height: 60px;
  }

  .comment_name{
      width: 100%;
      height: 60px;
  }

  .comment_img{
    width: 5%;
    height: 50px;
    line-height: 50px;
     text-align: center;
    float: left;
    margin-right: 2px;
      /*background-color: hotpink;*/
    position: relative;
  }



  .comment_content{
      width: 94%;
     height: 60px;
    float: left;
    /*background-color: #9aa2ab;*/
    font-size: 16px;
    /*padding-left: 1%;*/
  }
 .comment_name{
   width: 100%;
     color: blue;
   height: 25px;
   line-height: 25px;
   position: relative;



 }
  .comment_nickname span{
    padding-bottom: 2px;

  }
  .comment_nickname span:nth-of-type(1){
    border-bottom: 1px solid red;
  }
  .reply{
    position: absolute;
    right: 2%;
    bottom: 0px;
    border-bottom: none;

  }
  .reply .el-link{
    font-size: 16px;
    border-bottom: none;
    height: 25px;

    line-height: 25px;
  }
  .comment_nickname .time{
      position: absolute;
      right: 10%;
    border-bottom: none;
  }
  .comment_word{
       height: 35px;
      line-height: 30px ;
      width: 100%;
      padding-top: 8px;
      border-top: 1px solid #24292E;

  }

  /*---子评论----*/
  .children_list{
     margin-top: 5px;
  }
  .children_list li{
     margin-top: 10px;
     list-style: none;
      margin-left: 4%;
      /*background-color: #13ce66;*/
  }



  .el-card__header{
      padding: 10px 20px;
  }

  .box-card{
      margin-top: 10px;
  }
  .clearfix span{
      color: #8492a6;
      font-size: 20px;
  }

  .login_quick{
    margin-top: 10px;
    width: 100%;
    text-align: center;
  }
  .login_quick .el-button:nth-of-type(1){
    /*margin-left: 25%;*/
    margin-right: 1%;
  }

  /*--头像旋转--*/
  .comment_img .el-avatar:hover{
      transform: rotate(360deg);
    transition-duration:0.5s;
    transition-timing-function: linear;

  }

</style>
